<template>
  <el-card>
    <div class="head">
      <el-button
        color="#1baeae"
        :icon="Plus"
        style="color: #fff"
        @click="goAdd"
        >新增商品</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="goodsId" label="商品编号" />
      <el-table-column prop="goodsName" label="商品名" />
      <el-table-column prop="goodsIntro" label="商品简介" />
      <el-table-column prop="goodsCoverImg" label="商品图片">
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :src="scope.row.goodsCoverImg"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="stockNum" label="商品库存" />
      <el-table-column prop="sellingPrice" label="商品售价" />
      <el-table-column prop="goodsSellStatus" label="上架状态">
        <template #default="scope">
          <p v-if="scope.row.goodsSellStatus === 0" style="color: #1a904a">
            销售中
          </p>
          <p v-else style="color: #f00">已下架</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button text type="primary" @click="edit(scope.row)">修改</el-button>
          <el-button
            text
            type="primary"
            @click="shangjia(scope.row)"
            v-if="scope.row.goodsSellStatus === 1"
            >上架</el-button
          >
          <el-button text type="primary" @click="shangjia(scope.row)" v-else
            >下架</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="data.pageNumber"
        v-model:page-size="data.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout=" prev, pager, next"
        :total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { api } from "../../../api/api";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {useStore} from "../../../store/counter"
const store = useStore()
const route = useRoute();
const router = useRouter();
const tableData = ref<any>([]);
const total = ref(0);
const data = reactive({
  pageSize: 10,
  pageNumber: 1,
});
async function getList() {
  const res: any = await api.getGoodsListApi(data);
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
}
onMounted(() => {
  getList();
});
// 上架商品
async function shangjia(row: any) {
  const index = tableData.value.findIndex(
    (item: any) => item.goodsId == row.goodsId
  );
  let status1 = 0;
  if (tableData.value[index].goodsSellStatus == 0) status1 = 1;
  else status1 = 0;
  const res: any = await api.OffShelfGoodsApi({
    status: status1,
    ids: [row.goodsId],
  });
  if (res.resultCode == 200) {
    ElMessage.success("操作成功");
    getList();
  } else {
    ElMessage.error(res.message);
  }
}
// 添加
function goAdd() {
    router.push('/add')
    store.changeTitle("添加商品")
}
// 修改
function edit(row: any) {
    store.setGoods(row)
    router.push({
        path:'/add',
        query:{id:row.goodsId}
    })
    store.changeTitle("编辑商品")
    store.changeImg(row.goodsCoverImg)
}
</script>

<style lang="scss" scoped>
.pagination {
  width: 100%;
  display: flex;
  margin: 20px 0;
  justify-content: center;
  align-items: center;
}
</style>
